<template>
  <div>
      <button @click="add">点击我+1</button>
      <button @click="minus">点击我-1</button>
      <button @click="even">点击我偶数+1</button>
      <button @click="odd">点击我奇数+1</button>
      <button @click="addTen">点击我+10</button>
      <button @click="delayAdd">点击我2S之后+1</button>
      <!-- 任何组件都可以使用仓库数据 -->
      <!-- 因为入口文件中已经配置store一个K，因为任意组件都可以获取到vuex当中$store仓库，因此可以获取数据！ -->
      <h1>{{$store.state.count}}</h1>
  </div>
</template>

<script>
export default {
  name: '',
  methods: {
      //点击+1按钮的回调函数
      add(){
        //组件派发action,组件怎么派发action!!
        //因为$store仓库对象身上拥有一个dispatch方法，因此组件可以派发action
        //dispatch最多两个参数：第一个参数必有的，第二个参数可有可无
        //第一个参数:action(名字:就是字符串)
        this.$store.dispatch("addNum");
        //上面的代码：组件实例派发一个addNum类型的action，
        //Vuex仓库就的有相应的action，名字务必一样！！！
      },
      //点击-1按钮的回调函数
      minus(){
         //派发action,通过$store的dispatch方法，让组件派发action
         //第一个参数:action类型（字符串）
         this.$store.dispatch("minusNum"); 
      },
      //点击偶数加上1按钮回调
      even(){
        //派发action
        this.$store.dispatch('evenNum');
      },
      //点击奇数加上1按钮回调
      odd(){
        //组件派发action:通过$store.dispatch方法触发action
        this.$store.dispatch('oddNum');
      }
      ,
      //点击添加10按钮的回调
      addTen(){
         //dispatch方法：第一个参数，action类型（名字）是一个字符串
         //dispatch方法：第二个参数，是给tenNum类型的action函数传递的参数---【什么类型的数据都可以】！！！
         //派发action的时候，触发相应action函数执行,下面这里，可以给相应的action函数传递参数（什么类型的数据都可以）
         //仅仅只能传递一个参数----载荷payload
         this.$store.dispatch('tenNum',10);
      },
      //点击2S之后加上1回调
      delayAdd(){
        this.$store.dispatch('delayNum');
      }
  },
}
</script>

<style scoped>

</style>
